[CSS] textarea, 사이즈, 크기 수정 못하게 변경, resize

웹사이트의 방문자가 textarea 태그의 박스크기, 사이즈를 임의로 수정을 못하게 하는 방법을 알아보겠습니다. 어떻게해야할까요? 아래에서 알아봅니다.

먼저 textarea 태그는 주로 게시판이나 댓글에 사용됩니다. 이때 textarea 태그는 기본값으로 사용자가 임의 사이즈를 변경 가능토록되어있습니다. 이때 방문자가 임의변경을 못하게 하려면? 바로 css의 resize 속성값을 변경해야합니다.

# textarea 변경 못하도록 고정하는 방법

아래는 resize 속성을 사용하여 방문자가 사이즈를 변경하지 못하도록 막는 예제입니다. 그럼 아래 소스를 봐주세요.
@ textarea.html
이제 태그에 css의 resize를 사용해보겠습니다. 아래와 같이 css를 적용합니다. 이때 적용 가능한 값이 몇 가지 존재합니다. 원하는 값으로 설정하면 됩니다.

@textarea.css

여기서 상하좌우 리사이징을 막으려면 resize: none을 적용하면 되죠.

resize: none


이처럼 원하는 값을 CSS에 설정하여 resize를 선택할 수 있습니다. resize 속성에는 위와 같이 여러가지 값을 선택하여 적용할 수 있습니다. none을 사용하여 상하, 좌우 모두 변경 불가능하도록 막는 방법도 있지만 vertical 값 역시 많이 사용됩니다.

! resize에 더 많이 사용되는 none 그리고 vertical값

none의 경우 방문자에게 임의 수정을 모두 불가능하도록 변경하지만 vertical의 경우 상하 변경만 가능하도록 부분 허용합니다. 일반적으로 반응형웹 페이지가 많기 때문에 좌우 width값의 변경은 Layout에 영향을 줄 수 있으므로 horizontal이 아닌 vertical이 많이 사용됩니다. 또한 사용자의 시아에서도 입력된 텍스트가 세로로 길어지는 것이 좌우로 길어지는 것보다 인지하기 더 쉽고 편하겠죠.